footer{
	width: 100%;
	background-color: #f5f5f5;
	margin-top: 20px;
}
.service{
	overflow: hidden;
	display: flex;
	justify-content: space-around;
	padding: 30px 0;
	border-bottom: 1px solid #ccc;
}
/* 
精灵图:sprites(雪碧图) 把多个小的图标或图形放在一个图片文件中(.png),
使用时通过坐标获取，目的是为了减少请求次数，从而达到网站性能优化的目标。
注意：精灵图只能以背景图的形式加载。

精灵图是一个整合了很多个小背景图标的大背景图。
  作用：是为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。
  精灵图也称作CSS sprites、CSS雪碧等。
  用法：与遮罩有些类似，通过移动大背景图的位置来显示目标小背景图。

  需要测量的两个数值：
    小图标的宽和高；
    小图标距离大图片左上角的x轴和y轴的值。（其中x轴是大图片上边框，y轴是大图片的左边框）
*/
.service li span{
	width: 50px;
	height: 50px;
	display: inline-block;
	background-image: url(../img/icons.png);
}
.service li:nth-child(1) span{
	background-position: -253px -3px;
}
.service li:nth-child(2) span{
	background-position: -255px -54px;
}
.service li:nth-child(3) span{
	background-position: -257px -106px;
}
.service li:nth-child(4) span{
	background-position: -258px -157px;
}
.service li:nth-child(5) span{
	background-position: -257px -209px;
}
.service h3, .service p{
	font-size: 14px;
	font-weight: normal;
	color: #666;
	line-height: 25px;
}
.help{
	display: flex;
	justify-content: space-around;
	padding: 25px 0 20px;
	border-bottom: 1px solid #ccc;
	text-align: center;
}
.help dt{
	font-size: 16px;
	line-height: 30px;
}
.help dd{
	line-height: 25px;
}
.help dd:hover a{
	color: #999;
}
/* 版权 */
.link-addr{
	padding: 10px 0 30px;
	text-align: center;
	color: #333;
}
.link{
	line-height: 40px;
}
.link li{
	position: relative;
	display: inline-block;
	margin-right: 10px;
}
.link li:hover a{
	color: #999;
}
.link li:not(:first-child)::after{
	content: '';
	display: block;
	width: 1px;
	height: 13px;
	border-right: 1px solid #333;
	position: absolute;
	left: -9px;
	top: 14px;
}